<template>
  <div class="dialog-form page">
    <div class="base-container">
      <p class="title">基础信息</p>
      <el-form :model="info" label-position="left">
        <el-row :gutter="36">
          <el-col :span="8">
            <el-form-item label="任务名称：">{{ info.taskName }}</el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="任务执行开始时间：">{{ parseTime(info.startTime, '{y}-{m}-{d} {h}:{i}') }}</el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="任务执行结束时间：">{{ parseTime(info.endTime, '{y}-{m}-{d} {h}:{i}') }}</el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="巡更人：">{{ info.userName }}</el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="巡更检查项目：">{{ info.projectName }}</el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="执行情况：">
              <dict-tag :options="patrol_status" :value="info.status"/>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="巡更结果：">
              <dict-tag :options="patrol_result" :value="info.result"/>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="base-container mt-10px">
      <p class="title">巡更记录</p>
      <el-table border :data="recordList" class="mt-20px" max-height="500">
        <el-table-column label="巡更签到人员" align="center" prop="userName" min-width="120" show-overflow-tooltip />
        <el-table-column label="巡更时间" align="center" prop="patrolTime" width="160" />
        <el-table-column label="车辆线路" align="center" prop="lineName" width="100" />
        <el-table-column label="车辆编号" align="center" prop="busNo" width="100" />
        <el-table-column label="所属公司" align="center" prop="companyName" min-width="120" show-overflow-tooltip />
        <el-table-column label="巡更结果" align="center" prop="result" width="100">
          <template #default="scope">
            <dict-tag :options="patrol_result" :value="scope.row.result" />
          </template>
        </el-table-column>
        <el-table-column label="巡更图片" align="center" prop="picList" width="160">
          <template #default="scope">
            <div class="flex">
              <el-image
                v-for="(url, index) in scope.row.picList" :key="index"
                class="img"
                :src="url"
                :zoom-rate="1.2"
                :max-scale="7"
                :min-scale="0.2"
                :preview-src-list="scope.row.picList"
                :initial-index="index"
                fit="cover"
                preview-teleported
                :z-index="9999"
              />
            </div>
          </template>
        </el-table-column>
        <el-table-column label="巡更备注" align="center" prop="remark" min-width="150" show-overflow-tooltip />
      </el-table>
    </div>
  </div>
</template>

<script setup>
import { getPatrolRecord  } from "@/api/patrol/record"
import { useRoute } from "vue-router"

const route = useRoute()
const { proxy } = getCurrentInstance()
const { patrol_status, patrol_result } = proxy.useDict("patrol_status", "patrol_result")

const info = ref({})
const recordList = ref([])

onMounted(() => {
  getPatrolRecord(route.params.id).then(res => {
    if (res.code == 200) {
      info.value = res.data.info || {}
      const arr = res.data.list || []
      arr.forEach(obj => {
        obj.picList = obj.pic ? obj.pic.split(',') : []
        recordList.value.push(obj)
      })
    }
  })
})


</script>

<style lang="scss" scoped>
@import '@/assets/styles/variables.module.scss';

.title {
  color: rgb(31, 31, 31);
  font-size: 16px;
  font-weight: 500;
  padding-bottom: 10px;
  margin-bottom: 10px;
  border-bottom: 1px dashed rgb(225, 225, 225);
}

.descriptions {
  :deep(.el-descriptions__cell) {
    width: 33.33%
  }

  :deep(.el-descriptions__content) {
    word-break: break-all;
  }
}

:deep(.unpay) {
  color: #F64C4C !important;
}

.img {
  width: 40px;
  height: 40px;
  object-fit: cover;
  flex-shrink: 0;
  margin-right: 8px;
}

</style>